<template>
    <div style="width: 256px">
        <a-button type="primary" @click="toggleCollapsed" style="margin-bottom: 16px">
            <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
        </a-button>
        <a-menu
                :defaultSelectedKeys="['1']"
                :defaultOpenKeys="['1']"
                mode="inline"
                theme="dark"
                :inlineCollapsed="collapsed"
        >
            <template v-for="item in list">
                <a-menu-item v-if="!item.children" :key="item.key">
                    <a-icon type="pie-chart" />
                    <span>{{item.title}}</span>
                </a-menu-item>
                <sub-menu v-else :menu-info="item" :key="item.key"/>
            </template>
        </a-menu>
    </div>
</template>

<script>
    /*
     * recommend SubMenu.vue https://github.com/vueComponent/ant-design-vue/blob/master/components/menu/demo/SubMenu.vue
     * SubMenu1.vue https://github.com/vueComponent/ant-design-vue/blob/master/components/menu/demo/SubMenu1.vue
     * */
    import SubMenu from './Menu/SubMenu'
    export default {
        components: {
            'sub-menu': SubMenu,
        },
        data () {
            return {
                collapsed: false,
                list: [
                    {
                        key: '1',
                        title: '系统管理',
                        icon:'android',
                        children: [
                            {
                                key: '1.1',
                                title: '用户管理',
                                icon:'android',
                            },
                            {
                                key: '1.2',
                                title: '角色管理'
                            },
                            {
                                key: '1.3',
                                title: '菜单管理'
                            },
                        ],
                    }],
            }
        },
        methods: {
            toggleCollapsed () {
                this.collapsed = !this.collapsed
            },
        },
    }
</script>
